<template>
  <div class="productComp">
    <div class="radar">
      <div class="workTopTitle">
        <div class="fl">
          <div class="title">{{leftTitle}}</div>
        </div>
        <div class="fr" >
          <p>单位：万元</p>
        </div>
      </div>
      <div class="radarArea">
      <div class="chartsArea">
        <div class="barContainer">
           <threepie :id="id" :option="option" class="pieThere" v-if="highFlag"></threepie>
           <!-- <productEchart :pieData='pieData'></productEchart> -->
        </div>
      </div>
      <div class="tableContainer">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          height="280px"
          class="tableTh28"
          ref="table"
        >
         <el-table-column label="整体排名" width="70" align="center">
            <template slot-scope="scope">
              <img src="~@/assets/images/common/first.png" alt v-if="scope.$index == 0" />
              <img src="~@/assets/images/common/second.png" alt v-else-if="scope.$index == 1" />
              <img src="~@/assets/images/common/third.png" alt v-else-if="scope.$index == 2" />
              <span v-else>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="indexName" label="业务" show-overflow-tooltip min-width="60"></el-table-column>
          <el-table-column prop="indexValue" label="收入" show-overflow-tooltip min-width="60"></el-table-column>
          <el-table-column prop="rate" label="占比" show-overflow-tooltip min-width="60"></el-table-column>
        </el-table>
      </div>
     </div>
    </div>
    <div class="table">
      <div class="workTopTitle">
        <div class="fl">
          <div class="title">{{rightTitle}}</div>
        </div>
        <div class="fr" >
          <p>单位：万元</p>
        </div>
      </div>
      <div class="pieArea">
        <echartPie :pieData1='pieData1'></echartPie>
      </div>
    </div>
  </div>
</template>

<script>
import bar from "./echarts/bar";
import { $budgetAPI } from "@/api";
import threepie from './echarts/threepie'
import echartPie from './echarts/echartPie'
import productEchart from './echarts/productEchart'
import { getSessionStorage } from "@/common/js/storage";
import {getCookie} from "@/common/js/cookie"
export default {
  name: "productComp",
  components: {
    bar,
    threepie,
    echartPie,
    productEchart
  },
  data() {
    return {
      tableLoading: false,
      areaSelect: {
        areaId: "",
        areaName: ""
      },
      currentTime: "",
      leftTitle: "收入产品构成",
      rightTitle: "增存量收入构成",
      areaSelect2: {
        areaId: "",
        areaName: ""
      },
      barSelect: {
        name: "",
        id: "1"
      },
      areaList: [],
      areaName:'',
      tableData: [],
      pieData:[],
      pieData1:[],
      barData: [],
      radarData: {},
      accountInfo: "",
      highFlag:'',
      id: 'test',
      option:{
         chart: {
           type: 'pie',//饼图
            options3d: {
              enabled: true,//使用3d功能
              alpha: 60,//延y轴向内的倾斜角度
              beta: 0,
            }
         },
       title: {
            text: ''//图表的标题文字
               },
       tooltip: {
             pointFormat: '{series.name}: <b>{point.y}万元</b>'
             },
       credits: {
             enabled:false
         },//去掉地址
       plotOptions: {
         pie: {
           allowPointSelect: true,//每个扇块能否选中
           cursor: 'pointer',//鼠标指针
           depth: 20,//饼图的厚度
           size:'75%',
         }
       },
         series: [
            {
                type: 'pie',
                size:'50%',
                name:'收入产品构成',
                // data: [
                //     {'name':this.pieData[1].indexName,y:this.pieData[1].indexValue,color:'#7f92f7'},
                //     {'name':this.pieData[0].indexName,y:this.pieData[0].indexValue,color:'#f48892'},
                // ],
                data:[],
                // data:this.pieData,
                dataLabels: {
                				  enabled: true,//是否显示饼图的线形tip
                				  format: '{point.name}<br>{point.y}万元',
                				  distance:25,
                				  padding:0,
                				  color:'#636d9a'
                			}
            },
            {
                type: 'pie',
                size:'50%',
                name:'收入产品构成',
                data:[],
                // data: [
                  // {'name':'this.pieData[1].indexName',y:this.pieData[1].indexValue,color:'#7f92f7'},
                  // {'name':this.pieData[0].indexName,y:this.pieData[0].indexValue,color:'#f48892'},
                // ],
                 // data:this.pieData,
                 dataLabels: {
                				  enabled: true,//是否显示饼图的线形tip
                				  format: '{point.percentage:.0f}%',
                				  distance:-20,
                				  padding:0,
                         style:{
                          color:'#fff',
                          textOutline:"none",
                           }
                			}
            },
       ]
       }
    };
  },
  beforeMount(){
      this.getIncomeProductStructData()
  },
  mounted() {
    this.getCustTypeNewData()
  },
  methods: {
    //获取柱状图数据
    getIncomeProductStructData() {
      let token=getCookie('token')
      let that = this
      $budgetAPI.getIncomeProductStructData(
         {token:token},
        res => {
          if (res.code == 0) {
             res.content.totalList.map((item,index)=>{
               let colorList=['#7f92f7','#f48892']
               let obj={}
               obj['name']=item.indexName
               obj['y']=  Number(item.indexValue)
               obj['color']= colorList[index]
               this.pieData.push(obj)
             })
             that.option.series[0].data= this.pieData
             that.option.series[1].data= this.pieData
             this.tableData = res.content.basicList;
             this.highFlag=true;
          } else {
            this.alertError(res);
          }
        },
        err => {}
      );
    },
    //获取收入构成-分存增量数据
    getCustTypeNewData() {
      $budgetAPI.getCustTypeNewData(
        {},
        res => {
          if (res.code == 0) {
              // debugger
            let obj = {
              className: "pieData2",
              data: []
            };
            obj.data = res.content;
            this.pieData1 = obj;
          } else {
            this.alertError(res);
          }
        },
        err => {}
      );
    },
  }
};
</script>

<style lang="scss" scoped>
.productComp {
  margin-top: 20px;
  width: 99%;
  height: 330px;
  border-radius: 5px;
  display: flex;
  .radar {
    width: 55%;
    height: 100%;
    background-color: #ffffff;
    margin-right: 20px;
     border: 1px solid #dee5f3;
    // border-right: 1px solid #dee5f3;
    .chartsSwitch {
      width: 72px;
      height: 27px;
      line-height: 25px;
      margin-top: 8px;
      text-align: center;
      border: 1px solid #dee5f3;
      border-radius: 3px;
      display: flex;
      overflow: hidden;
      span {
        width: 35px;
        cursor: pointer;
        display: inline-block;
        &.active {
          background-color: #00b7ee;
          color: #ffffff;
        }
      }
    }
    .radarArea{
       display: flex;
      .chartsArea {
        padding: 10px 20px;
        height: 280px;
        width: 50%;
        .radarContainer {
          width: 100%;
          height: 100%;
          position: relative;
          .option {
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 88;
            display: flex;
            justify-content: flex-end;
          }
        }
        .barContainer {
          width: 100%;
          height: 100%;
          position: relative;
          .option {
            width: 100%;
            position: absolute;
            top: 0;
            z-index: 88;
            display: flex;
            justify-content: space-between;
            p {
              line-height: 28px;
              margin-right: 20px;
            }
          }
        }
      }
    }

  }
  .table {
    width: 45%;
    height: 100%;
    padding-right: 10px;
    background-color: #ffffff;
     border: 1px solid #dee5f3;
    .workTopTitle{
      .fr{
        div,p{
          display: inline-block;
        }

      }
    }
    .tableContainer {
      padding: 5px 5px 10px 5px;
      height: 290px;
      overflow: hidden;

    }
  }
}
</style>
<style lang="scss">
.productComp {
  .option {
    .el-input__inner {
      padding: 0 14px;
      height: 28px;
      line-height: 28px;
      font-size: 12px;
      vertical-align: middle;
      border-radius: 5px;
    }
    .el-input__icon{
      line-height: 28px;
    }
  }
  .tableContainer {
    padding: 5px 5px 10px 5px;
    height: 290px;
    overflow: hidden;
     width:50%;
     .el-table::before{
           height: 0;
      }
    .el-table th{
      background-color:#f8f9fb!important;
    }
    .el-table td, .el-table th.is-leaf{
      border-bottom:none;
    }
    .el-table tr td:first-child .cell span{
      line-height: 20px;
      border-radius: 100px;
      background-color: #f0f2f5;
      height: 20px;
      width: 20px;
      display: inline-block;
    }
  }
  .pieArea{
    height:calc(100% - 41px);
    width: 100%;
    padding: 20px;
  }
 .el-table .cell{
   text-align: center;
 }
}
</style>
